<template>
<!--  <NavBar />-->
  <div class="home-page">
    <div>
      <img width="100%" height="auto" src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/web-%E6%8E%A8%E8%8D%90%E9%A1%B5%E3%80%81%E8%AF%BE%E5%90%8E%E6%9C%8D%E5%8A%A1%E9%A2%91%E9%81%93banner_1721034586572.png?x-eos-process=image/format,webp"/>
    </div>
    <div class="navbar">
      <div class="nav-item" :class="{ 'active-nav-item': activeNavItem === 'sience' }" @click="activateNavItem('sience')" @click.stop="Science"><img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/科普教育-小_1681796807949.png" alt="科普教育"/> 科普教育</div>
      <div class="nav-item" :class="{ 'active-nav-item': activeNavItem === 'physical' }" @click="activateNavItem('physical')" @click.stop="Physical"><img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/体育锻炼-小_1681796849439.png" alt="体育锻炼"/>体育锻炼</div>
      <div class="nav-item" :class="{ 'active-nav-item': activeNavItem === 'culture' }" @click="activateNavItem('culture')" @click.stop="Culture"><img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/文化艺术-小_1681796896792.png" alt="文化艺术"/>文化艺术</div>
      <div class="nav-item" :class="{ 'active-nav-item': activeNavItem === 'reading' }" @click="activateNavItem('reading')" @click.stop="Reading"><img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/经典阅读-小_1681796930567.png" alt="经典阅读"/>经典阅读</div>
      <div class="nav-item" :class="{ 'active-nav-item': activeNavItem === 'practice' }" @click="activateNavItem('practice')" @click.stop="Practice"><img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/研学实践-小_1681796951268.png" alt="研学实践"/>研学实践</div>
      <div class="nav-item" :class="{ 'active-nav-item': activeNavItem === 'film' }" @click="activateNavItem('film')" @click.stop="Film"><img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/影视教育-小_1681796975291.png" alt="影视教育"/>影视教育</div>

    </div>
    <div class="center" v-if="!main">
      <Cu v-if="culture" />
      <Fi v-if="film" />
      <Ph v-if="physical" />
      <Pr v-if="practice" />
      <Re v-if="reading" />
      <Sc v-if="science" />
    </div>

  <div class="main-page" v-if="main">
    <div class="science-education">
      <div class="header">
        <h1>科普教育</h1>
      </div>
      <div class="content">
        <div class="image-section" @click="Science">
          <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/科普教育-左_1681797084637.jpg" alt="科普教育" />
        </div>
        <div class="info-section">
          <Card resourceId="380"/>
          <Card resourceId="381"/>
          <Card resourceId="382"/>
        </div>
      </div>
    </div>
    <div class="science-education">
      <div class="header">
        <h1>体育锻炼</h1>
      </div>
      <div class="content">
        <div class="image-section" @click="Physical">
          <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/体育锻炼-左_1681797415413.jpg" alt="体育锻炼" />
        </div>
        <div class="info-section">
          <Card resourceId="390"/>
          <Card resourceId="391"/>
          <Card resourceId="392"/>
        </div>
      </div>
    </div>
    <div class="science-education">
      <div class="header">
        <h1>文化艺术</h1>
      </div>
      <div class="content">
        <div class="image-section" @click="Culture">
          <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/文化艺术-左_1681797488830.jpg" alt="文化艺术" />
        </div>
        <div class="info-section">
          <Card resourceId="394"/>
          <Card resourceId="395"/>
          <Card resourceId="396"/>
        </div>
      </div>
    </div>
    <div class="science-education">
      <div class="header">
        <h1>经典阅读</h1>
      </div>
      <div class="content">
        <div class="image-section" @click="Reading">
          <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/经典阅读-左_1681797517289.jpg" alt="经典阅读" />
        </div>
        <div class="info-section">
          <Card resourceId="385"/>
          <Card resourceId="386"/>
          <Card resourceId="387"/>
        </div>
      </div>
    </div>
    <div class="science-education">
      <div class="header">
        <h1>研学实践</h1>
      </div>
      <div class="content">
        <div class="image-section" @click="Practice">
          <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/研学实践-左_1681797574854.jpg" alt="研学实践" />
        </div>
        <div class="info-section">
          <a href="https://zt.ykt.eduyun.cn/ykt/yktyxjd/yxsjjy/jd/03Jinggangshan.htm" class="card">
          <img src="https://s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/download_1681801886379.jpg"  alt="图片加载失败" width="20%" height="auto" />
          <div class="card-content">
            <h3 class="card-title">全国青少年井冈山革命传统教育基地</h3>
            <div class="card-info">
              <span class="card-source">作者： 智慧职教</span>
              <span class="card-views">播放数： 3012</span>
              <span class="card-likes">点赞数： 701</span>
            </div>
          </div>
          </a>
          <a href="https://zt.ykt.eduyun.cn/ykt/yktyxjd/yxsjjy/yd03/yd_jingmen.htm" class="card">
          <img src="https://s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E7%A0%94%E5%AD%A6%E5%AE%9E%E8%B7%B5-%E5%8F%B32_1681802016340.jpg"  alt="图片加载失败" width="20%" height="auto" />
          <div class="card-content">
            <h3 class="card-title">荆门市示范性综合实践基地</h3>
            <div class="card-info">
              <span class="card-source">作者： 智慧职教</span>
              <span class="card-views">播放数： 2971</span>
              <span class="card-likes">点赞数： 607</span>
            </div>
          </div>
        </a>
          <a href="https://zt.ykt.eduyun.cn/ykt/yktyxjd/yxsjjy/yd03/yd_baotou.htm" class="card">
            <img src="https://s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E7%A0%94%E5%AD%A6%E5%AE%9E%E8%B7%B5-%E5%8F%B33_1681802083623.jpg"  alt="图片加载失败" width="20%" height="auto" />
            <div class="card-content">
              <h3 class="card-title">包头市中小学社会综合实践教育中心</h3>
              <div class="card-info">
                <span class="card-source">作者： 智慧职教</span>
                <span class="card-views">播放数： 2103</span>
                <span class="card-likes">点赞数： 405</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="science-education">
      <div class="header">
        <h1>影视教育</h1>
      </div>
      <div class="content">
        <div class="image-section" @click="Film">
          <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/影视教育-左_1681797617244.jpg" alt="影视教育" />
        </div>
        <div class="info-section">
          <Card resourceId="399"/>
          <Card resourceId="400"/>
          <Card resourceId="401"/>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import Cu from "@/views/after-school/Culture.vue"
import Fi from "@/views/after-school/Film.vue"
import Ph from "@/views/after-school/Physical.vue"
import Pr from "@/views/after-school/Practice.vue"
import Re from "@/views/after-school/Reading.vue"
import Sc from "@/views/after-school/Science.vue"
import Card from "@/components/CardOne.vue";


export default {
  name: 'HomePage',
  components: {
    NavBar,
    Cu,
    Fi,
    Ph,
    Pr,
    Re,
    Sc,
    Card,
  },
  data() {
    return {
      activeNavItem: null,
      main: true,
      culture: false,
      film: false,
      physical: false,
      practice: false,
      reading: false,
      science: false,
    }
  },
  methods: {
    activateNavItem(id) {
      this.activeNavItem = id;
    },
    Culture() {
      this.main = false;
      this.culture = true;
      this.film = false;
      this.physical = false;
      this.practice = false;
      this.reading = false;
      this.science = false;
      this.activeNavItem = 'culture';
    },
    Film() {
      this.main = false;
      this.culture = false;
      this.film = true;
      this.physical = false;
      this.practice = false;
      this.reading = false;
      this.science = false;
      this.activeNavItem = 'film';
    },
    Physical() {
      this.main = false;
      this.culture = false;
      this.film = false;
      this.physical = true;
      this.practice = false;
      this.reading = false;
      this.science = false;
      this.activeNavItem = 'physical';
    },
    Practice() {
      this.main = false;
      this.culture = false;
      this.film = false;
      this.physical = false;
      this.practice = true;
      this.reading = false;
      this.science = false;
      this.activeNavItem = 'practice';
    },
    Reading() {
      this.main = false;
      this.culture = false;
      this.film = false;
      this.physical = false;
      this.practice = false;
      this.reading = true;
      this.science = false;
      this.activeNavItem = 'reading';
    },
    Science() {
      this.main = false;
      this.culture = false;
      this.film = false;
      this.physical = false;
      this.practice = false;
      this.reading = false;
      this.science = true;
      this.activeNavItem ='science';
    },
}
}
</script>

<style scoped>
.main-page {
  width: 80%;
  margin: 0 auto;
  background-color: #f2f2f2;
}
.home-page {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  background: #f2f2f2;
}

.navbar {
  display: flex;
  justify-content: space-between; /* 确保子元素平均分布 */
  align-items: center; /* 垂直居中 */
  background-color: #f2f2f2;
  width: 100%; /* 设置导航栏宽度为80% */
  margin: 0 auto; /* 使导航栏居中 */
}

.nav-item {
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  flex-direction: row; /* 子元素（图片和文字）排列在一行 */
  text-align: center; /* 文本居中 */
  padding: 20px; /* 内边距 */
  flex: 1; /* 占据相同的空间 */
  background-color: #ddd; /* 默认背景颜色 */
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
  cursor: pointer; /* 鼠标悬停时显示小手 */
}

.nav-item img {
  margin-right: 8px; /* 图片与文字之间的间距 */
}


.nav-item:hover {
  color: #007bff; /* 鼠标悬停时的字体颜色 */
  background-color: white; /* 鼠标悬停时的背景颜色 */
}

.nav-item:active {
  color: #007bff; /* 鼠标点击时的字体颜色 */
  background-color: white; /* 鼠标点击后保持白色背景 */
}
.active-nav-item {
  background-color: white !important; /* 确保背景色为白色 */
  color: #007bff !important; /* 确保字体颜色 */
}
.science-education {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.content {
  display: flex;
  justify-content: space-between;
}

.image-section {
  cursor: pointer; /* 鼠标悬停时显示为小手 */
  transition: transform 0.3s; /* 平滑过渡效果 */
  flex: 1;
  position: relative;
  text-align: center;
}
.image-section:hover {
  transform: scale(1.05); /* 轻微放大效果 */
}

.image-section img {
  width: 100%;
  border-radius: 10px;
}

.image-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px;
  border-radius: 5px;
}

.info-section {
  flex: 1;
  margin-left: 20px;
}

.info-item {
  margin-bottom: 20px;
}

.info-item h2 {
  font-size: 18px;
  margin-bottom: 5px;
}

.info-item p {
  font-size: 14px;
  color: #555;
}
.card {
  display: flex;
  border: 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  color: black;
}

.card-img {
  width: 150px;
  height: auto;
  object-fit: cover;
}

.card-content {
  padding: 16px;
  flex: 1;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px;
}

.card-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #666;
}
</style>